/**
*@author       wuwg
*@createTime   2018/03/20
*@updateTime   2018/03/20
*@description
*@rule
 */
@import '../../../config/config.less';

@css-prefix-color-picker: ~"@{css-prefix}color-picker";
@css-prefix-select-dropdown: ~"@{css-prefix}select-dropdown";
@css-prefix-picker: ~"@{css-prefix}picker";

.@{css-prefix-color-picker} {
  display: inline-block;
  & .@{css-prefix-select-dropdown} {
    padding: 0;
  }
  &-rel{
    position: relative;
    line-height: 0;
    .@{css-prefix-color-picker}-input {
      padding-right: 32px;
    }
  }
  &-color{
    width: 18px;
    height: 18px;
    background-image: url();
    border-radius: 2px;
    position: relative;
    top: 2px;
    div{
      width: 100%;
      height: 100%;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
      border-radius: 2px;
    }
    &-empty{
      background: #fff;
      overflow: hidden;
      text-align: center;
      i{
        font-size: 18px;
      }
    }
  }
  &-picker{
    &-wrapper{
      padding: 8px 8px 0;
    }
    &-panel{
      width: 240px;
      margin: 0 auto;
      box-sizing: initial;
      position: relative;
    }
    &-hue-slider, &-alpha-slider{
      height: 10px;
      margin-top: 8px;
      position: relative;
    }
    &-colors{
      margin-top: 8px;
      overflow: hidden;
      span{
        display: inline-block;
        width: 20px;
        height: 20px;
        float: left;
        em{
          display: block;
          width: 16px;
          height: 16px;
          margin: 2px;
          cursor: pointer;
          border-radius: 2px;
          box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
        }
      }
    }
    .@{css-prefix-picker}-confirm{
        margin-top: 8px;
    }
  }

  &-saturation{
    &-wrapper{
      width: 100%;
      padding-bottom: 75%;
      position: relative;
      overflow: hidden;
    }
    &, &--white, &--black{
      cursor: pointer;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    &--white{
      background: linear-gradient(to right, #fff, rgba(255,255,255,0));
    }
    &--black{
      background: linear-gradient(to top, #000, rgba(0,0,0,0));
    }
    &-pointer{
      cursor: pointer;
      position: absolute;
    }
    &-circle{
      width: 4px;
      height: 4px;
      box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);
      border-radius: 50%;
      transform: translate(-2px, -2px);
    }
  }

  &-hue{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 2px;
    background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
    &-container{
      cursor: pointer;
      margin: 0 2px;
      position: relative;
      height: 100%;
    }
    &-pointer{
      z-index: 2;
      position: absolute;
    }
    &-picker{
      cursor: pointer;
      margin-top: 1px;
      width: 4px;
      border-radius: 1px;
      height: 8px;
      box-shadow: 0 0 2px rgba(0, 0, 0, .6);
      background: #fff;
      transform: translateX(-2px);
    }
  }

  &-alpha{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    &-checkboard-wrap{
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden;
      border-radius: 2px;
    }
    &-checkerboard{
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: url();
    }
    &-gradient{
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: 2px;
    }
    &-container{
      cursor: pointer;
      position: relative;
      z-index: 2;
      height: 100%;
      margin: 0 3px;
    }
    &-pointer{
      z-index: 2;
      position: absolute;
    }
    &-picker{
      cursor: pointer;
      width: 4px;
      border-radius: 1px;
      height: 8px;
      box-shadow: 0 0 2px rgba(0, 0, 0, .6);
      background: #fff;
      margin-top: 1px;
      transform: translateX(-2px);
    }
  }

  &-confirm{
    position: relative;
    &-color{
      position: absolute;
      top: 11px;
      left: 8px;
    }
  }
}
